<script setup>
import { storeToRefs } from 'pinia'
// import { ClickOutside as vClickOutside } from "element-plus";


//pinia-> useSearchPartStore
import { useSearchPartStore } from "@/stores/searchPart";
let { searchText,inputDom, searchPlaceHolder, searchTips, isShowSearchTips, nowSelectedSearchTipsIndex } = storeToRefs(useSearchPartStore());
const { searchOnFocus, inputFocus, searchOnKeyup,  searchTipsOnClick, searchObtOnClick, clearSearchTextOnClick } = useSearchPartStore();

//输入框键盘事件
const searchKeyupEvent = (e) => {
    searchOnKeyup(e);
}

</script>
<template>
    <div>
        <div class=" relative flex justify-center " @click="searchBarClickEvent">
            <div class="searchInput w-[900px] h-[80px] flex justify-center">
                <div
                    class="button-class  absolute z-10 left-[15px] top-[16px] flex items-center justify-center bg-[var(--ground-glass-background-color)] backdrop-blur-2xl  rounded-[32px] w-[115px] h-[50px]">
                    <div class="button-inner-class flex text-[20px] items-center justify-center w-[95px] text-[#dadcdc]">
                            <div>
                                <svg data-v-92a36aee="" viewBox="0 0 24 24" width="1em"
                                    height="1em" class="text-3xl">
                                    <path
                                        d="M6.217 12.486c1.964-.422 1.693-2.772 1.637-3.287c-.096-.788-1.028-2.172-2.291-2.061c-1.588.141-1.821 2.44-1.821 2.44c-.216 1.06.515 3.33 2.475 2.908m3.646-3.944c1.084 0 1.959-1.251 1.959-2.792c0-1.537-.871-2.785-1.955-2.785c-1.086 0-1.966 1.242-1.966 2.785s.88 2.792 1.965 2.792m4.671.186c1.454.195 2.38-1.355 2.568-2.53c.188-1.166-.754-2.528-1.776-2.763c-1.031-.237-2.303 1.411-2.431 2.484c-.136 1.318.188 2.627 1.634 2.813m5.751 1.973c0-.562-.46-2.253-2.19-2.253c-1.729 0-1.965 1.596-1.965 2.726c0 1.077.089 2.573 2.247 2.528c2.148-.052 1.913-2.438 1.913-3.002M18.1 15.626s-2.247-1.739-3.557-3.613c-1.776-2.768-4.304-1.64-5.144-.239c-.845 1.418-2.153 2.306-2.339 2.544c-.188.232-2.709 1.596-2.147 4.079c.563 2.483 2.528 2.439 2.528 2.439s1.446.142 3.133-.234c1.686-.375 3.13.091 3.13.091s3.92 1.317 5.005-1.212c1.072-2.537-.61-3.847-.61-3.847"
                                        fill="currentColor"></path>
                                </svg>
                            </div>
                        <div class="font-bold">百度</div>
                    </div>
                </div>

                <div class="">
                    <input ref="inputDom" :placeholder="searchPlaceHolder" @keydown="searchKeyupEvent" v-model="searchText"
                        class="input-class bg-[var(--ground-new-background-color)] backdrop-blur-xl w-[900px] h-[80px]  rounded-[52px] shadow-md" />
                </div>
                <!-- 清空搜索框 -->
                <div v-show="searchText.length != 0"
                    class="button-clear absolute z-10 right-[80px] top-[16px] flex items-center justify-center  rounded-[32px] w-[50px] h-[50px]"
                    @click.stop="clearSearchTextOnClick">
                    <div class="w-[30px] h-[30px] text-[var(--ground-glass-icon-color)] button-inner-class">
                        <svg viewBox="0 0 24 24" class="icon">
                            <path fill="var(--ground-glass-icon-color)" stroke="none" stroke-linecap="round"
                                stroke-linejoin="round" stroke-width="1.5"
                                d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2Zm0 2a8 8 0 1 0 0 16a8 8 0 0 0 0-16ZM9.879 8.464L12 10.586l2.121-2.122a1 1 0 1 1 1.415 1.415l-2.122 2.12l2.122 2.122a1 1 0 0 1-1.415 1.415L12 13.414l-2.121 2.122a1 1 0 0 1-1.415-1.415L10.586 12L8.465 9.879a1 1 0 0 1 1.414-1.415Z">
                            </path>
                        </svg>
                    </div>
                </div>
                <!-- 搜索 -->
                <div @click="searchObtOnClick"
                    class="button-class absolute z-10 right-[30px] top-[16px] flex items-center justify-center bg-[var(--ground-glass-background-color)] backdrop-blur-2xl  rounded-[32px] w-[50px] h-[50px]">
                    <div class="w-[30px] h-[30px] text-[var(--ground-glass-icon-color)] button-inner-class">
                        <svg viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="1.5" d="m17 17l4 4M3 11a8 8 0 1 0 16 0a8 8 0 0 0-16 0"></path>
                        </svg>
                    </div>
                </div>

                <!-- 搜索下拉框-->
                <div class="flex justify-center absolute top-[70px] " v-show="isShowSearchTips">
                    <div
                        class="searchPull w-[900px] bg-[var(--ground-glass-boardr-color)] backdrop-blur-xl rounded-[26px] shadow-md mt-[20px] p-1">
                        <div :class="`flex items-center content-center m-2 p-3 rounded-[26px] search ${nowSelectedSearchTipsIndex == index ? 'searchSelected' : ''}`"
                            v-for="(item, index) in searchTips" @click="searchTipsOnClick(index)" :key="index">
                            <div class="w-[30px] h-[30px] text-[var(--ground-glass-icon-color)] button-inner-class">
                                <svg viewBox="0 0 24 24">
                                    <path fill="none" stroke="currentColor" stroke-linecap="round"
                                        stroke-linejoin="round" stroke-width="1.5"
                                        d="m17 17l4 4M3 11a8 8 0 1 0 16 0a8 8 0 0 0-16 0"></path>
                                </svg>
                            </div>
                            <div class="text-xl pl-3">
                                {{ item }}
                            </div>

                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<style scoped>
.searchPull {
    z-index: 10;
}
.input-class {
    border: none;
    outline: none;
    display: block;
    padding-left: 170px;
    padding-right: 120px;
    font-size: 21px;
}
.searchInput {
    position: relative;
    top: 10rem;
}
.input-class::placeholder {
    color: var(--ground-text-background-color);
}

.button-class {
    border: 1px solid #fff3;
    /* 透明边框以避免影响布局 */
    box-shadow: 0px 0px 1px 0px #fffc;

    @apply hover:scale-[105%] hover:bg-[var(--ground-glass-background-hover-color)] transition-all duration-200 ease-in-out
}

.button-class:hover .button-inner-class {
    transition: all 0.2s ease-in-out;
    transform: scale(1.1);
}

/*** 清空搜索 ***/
.button-clear {

    @apply hover:scale-110 transition-all duration-200 ease-in-out
}


/*** 搜索下拉框 ***/
.search:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.1s ease-out;
}

.searchSelected {
    background-color: rgba(255, 255, 255, 0.2);
}

/*** 搜索引擎 ***/
.button-dropList {

    transition: all 100ms ease-out;
    height: 0px;
    @apply overflow-auto delay-[300ms];
}

.button-class:hover+.button-dropList,
.button-dropList:hover {

    height: 250px;
}

.button-dropList-item:hover {
    transition: all 0.1s ease-in-out;
    background-color: rgba(255, 255, 255, 0.2);
    color: rgba(72, 86, 88, 0.8);

}
</style>